
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <link rel="stylesheet" href="../../../../resources/plugins/elementui/index.css">
    <link rel="stylesheet" href="../../../../resources/css/page-health-login.css" />
    <link rel="stylesheet" href="../../../../resources/plugins2/elementui/index.css" />
    <script src="../../../../resources/plugins2/jquery/dist/jquery.min.js"></script>
    <script src="../../../../resources/plugins2/healthmobile.js"></script>
    <script src="../../../../resources/plugins2/vue/vue.js"></script>
    <script src="../../../../resources/plugins2/vue/axios-0.18.0.js"></script>
    <script src="../../../../resources/plugins2/elementui/index.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
        .el-icon-arrow-right:before{
            display: none;
        }
    </style>
</head>
<body>
<div id = "app">

    <el-table
            :data="tableData"
            style="width: 100%"
            :row-key="getRowKeys"
            :expand-row-keys="expands"
            @row-click="clickRowHandle"
            >
        <el-table-column type="expand" >
            <template slot-scope="props" >
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-table size="small" current-row-key="contesNo" :data="tableData" stripe highlight-current-row>
                        <el-table-column prop="id" label="赛事编号" align="序号"></el-table-column>
                        <el-table-column prop="name" label="赛事编号" align="center"></el-table-column>
                        <el-table-column prop="category" label="赛事名称" align="center"></el-table-column>
                        <el-table-column prop="desc" label="赛事开始时间" align="center"></el-table-column>
                        <el-table-column prop="address" label="赛事结束时间" align="center"></el-table-column>
                        <el-table-column prop="shop" label="比赛队伍" align="center"></el-table-column>
                        <el-table-column prop="shopId" label="比赛队伍" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini">编辑</el-button>
                                <el-button size="mini" type="danger" >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form>
            </template>
        </el-table-column>
        <el-table-column
                label="商品 ID"
                prop="id">
        </el-table-column>
        <el-table-column
                label="商品名称"
                prop="name">
        </el-table-column>
        <el-table-column
                label="描述"
                prop="desc">
        </el-table-column>
    </el-table>

</div>
</body>
<script>
    var vue = new Vue({
        el:'#app',
        data() {
            let that = this;
            return {
                tableData: [{
                    id: '12987122',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '12987123',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '12987125',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '12987126',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }],
                // 获取row的key值
                getRowKeys(row) {
                    console.log("row = " + row.id)

                    return row.id;
                },
                // 要展开的行，数值的元素是row的key值
                expands: [],
            }

        },
        created(){
        },
        methods:{
            clickRowHandle(row) {
                if (this.expands.includes(row.id)) {
                    this.expands = this.expands.filter(val => val !== row.id);
                } else {
                    //判断是否已经存在展开的行
                    if (this.expands.length !== 0) {
                        //如果存在展开行,清空expands数组,使它关闭
                        this.expands.splice(0, this.expands.length);
                        //打开点击的行
                        this.expands.push(row.id);
                    } else {
                        //如果不存在展开行,直接push打开点击的行
                        this.expands.push(row.id);
                    }
                }
            },
        }
    });
</script>

</html>